import React from 'react'
import {Table,Modal,message} from 'antd'
import {blogList,delBlog} from '../../api/index'
import scroll from '../../utils/scroll'
import './style.css'

const { confirm } = Modal;

class Blog extends React.Component {
  constructor(params) {
    super()
    this.state = {
      currentPage:1,
      dataSource:[],
      count:20,
      loading:false,
    }
  }


  handleDel=(record)=>{
    confirm({
      title: '删除?',
      content: '确认删除本条信息？',
      onOk:() =>{
        delBlog({
          _id:record._id
        }).then(res=>{
          if(res.data.data.delBlogRes.deleted > 0){
            message.success('删除成功')
          }else{
            message.error('删除失败')
          }
          this.setState({
            dataSource:[]
          });
          this.getList()
        })
      },
      onCancel() {},
    });
  }
  handleTableChange=(page)=>{
    // console.log(page)
  }
  componentWillMount() {
    this.getList()
  }

  componentDidMount() {
    scroll.start(this.getList)
  }

  getList=()=>{//获取歌单列表
    this.setState({
      loading:true
    })
    blogList({
      start:this.state.dataSource.length,
      count:this.state.count
    }).then(res=>{
      
      let arr = res.data.data.map(item=>JSON.parse(item))
      let data = [...this.state.dataSource,...arr]
      if(res.data.data.length < this.state.count){
        scroll.end()
      }
      this.setState({
        dataSource:data,
        loading:false
      })
    })
  }

  

  render() {
    const columns = [
      
      {
        title: '内容',
        dataIndex: 'content',
        key:'content',
        
      },
      {
        title: '作者',
        dataIndex: 'nickName',
        key:'nickName',
        width:100
      },
      {
        title: '头像',
        dataIndex: '',
        key:'img',
        width:100,
        render:(record)=> <img src={record.avatarUrl} alt="" style={{width:'50px',height:'50px'}}/>
      },
      {
        title: '操作',
        dataIndex: '',
        width:100,
        render: (text, record) => <a onClick={()=>this.handleDel(record)}>删除</a>,
      }
    ];

    return (
      <div>
        <div className='container'>
          <Table className='noPadingRow' 
          loading={this.state.loading} 
          dataSource={this.state.dataSource} 
          rowKey={record=>record._id}
          columns={columns} pagination={false}/>
        </div>
      </div>
    )
  }
}

export default Blog